<template>
  <view class="nearby-container dark-bg">
    <!-- 顶部导航栏 -->
    <view class="navbar dark-navbar">
      <view class="back-btn" @click="navigateBack">
        <u-icon name="arrow-left" color="#fff" size="28"></u-icon>
      </view>
      <view class="title dark-title">今日心动搭友</view>
      <view class="refresh-btn" @click="refreshList">
        <text class="refresh-text">换一批</text>
      </view>
    </view>

    <!-- 列表内容区 -->
    <scroll-view class="list-container dark-list-container" scroll-y>
      <view class="list-item dark-list-item" v-for="item in nearbyUsers" :key="item.id">
          <u-avatar :src="globalConfig.site_url + item.image" size="60"></u-avatar>
          <view class="user-info">
            <text class="nickname dark-nickname">{{ item.nickname }}</text>
            <text class="distance dark-distance">{{ item.distance.toFixed(2) }}km</text>
          </view>
          <view class="action-btn">
            <u-button type="primary" size="mini" @click="handleConnect(item.id)" :custom-style="{backgroundColor: '#7bdffe', borderColor: '#7bdffe', color: '#18181a'}">搭TA</u-button>
          </view>
        </view>

      <!-- 空状态 -->
      <view v-if="!nearbyUsers.length && !loading" class="empty-state dark-empty-state">
        <image src="/static/images/empty-nearby.png" mode="aspectFit"></image>
        <text class="empty-text dark-empty-text">附近暂时没有找到搭友</text>
        <u-button type="primary" @click="refreshList" :custom-style="{backgroundColor: '#7bdffe', borderColor: '#7bdffe', color: '#18181a', marginTop: '30rpx'}">重新加载</u-button>
      </view>

      <!-- 加载中 -->
      <view v-if="loading" class="loading-state dark-loading-state">
        <text class="loading-text dark-loading-text">加载中...</text>
      </view>
    </scroll-view>

    <!-- 一键匹配按钮 -->
    <view class="match-all-btn dark-match-all-btn">
      <u-button type="primary" @click="matchAll" :custom-style="{backgroundColor: 'linear-gradient(90deg, #7bdffe, #b97cff)', borderColor: '#7bdffe', color: '#fff', height: '90rpx', fontSize: '32rpx'}">一键匹配</u-button>
    </view>
  </view>
</template>

<script>
import { getNearbyUsers, connectUser } from '@/api/partner';
import { mapGetters, mapState } from 'vuex';
export default {
  data() {
    return {
      nearbyUsers: [],
      loading: false,
      page: 1,
      pageSize: 10
    };
  },
   computed: {
    isGroupChat() {
      return this.chatType === 'group';
    },
    ...mapGetters(['getUserInfo']),
    ...mapState({
      globalConfig: state => state.config,
      userLocation: state => state.location,
    })
  },
  onLoad() {
    this.fetchNearbyUsers();
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    // 获取附近用户列表
    async fetchNearbyUsers() {
      this.loading = true;
      console.log(this.userLocation, 'userLocation');
      
      try {
        const res = await getNearbyUsers({ 
          longitude:this.userLocation.longitude,
          latitude:this.userLocation.latitude, 
        });
        if (res.data.code == 1) {
          console.log(res.data.data);
          this.nearbyUsers = res.data.data
        } else {
          this.nearbyUsers = [];
          uni.showToast({
            title: res.msg || '获取附近搭友失败',
            icon: 'none'
          });
        }
      } catch (error) {
        this.nearbyUsers = [];
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
        console.error('获取附近搭友失败:', error);
      } finally {
        this.loading = false;
      }
    },
    // 刷新列表
    refreshList() {
      this.page = 1;
      this.fetchNearbyUsers();
    },
    // 连接用户
    async handleConnect(userId) {
     uni.navigateTo({
        url: `/pages/chat/detail?teamId=${userId}`
      });
    },
    // 一键匹配
    matchAll() {
      uni.navigateTo({
        url: '/pages/partner/matching'
      });
    }
  }
};
</script>

<style scoped>
  .dark-bg {
    min-height: 100vh;
    background-color: #18181a;
    color: #fff;
  }
  .dark-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    padding: 0 30rpx;
    background-color: #23232b;
    border-bottom: 1rpx solid #23232b;
  }
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
  }
  .dark-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
  }
  .refresh-btn {
    padding: 10rpx 15rpx;
  }
  .refresh-text {
    color: #7bdffe;
    font-size: 28rpx;
    font-weight: 500;
  }
  .dark-list-container {
    height: calc(100vh - 200rpx);
    padding: 20rpx 30rpx;
  }
  .dark-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #23232b;
    border-radius: 20rpx;
    padding: 25rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
  }
  .user-info {
    display: flex;
    align-items: center;
  }
  .dark-nickname {
    font-size: 32rpx;
    font-weight: bold;
    color: #fff;
    margin-right: 15rpx;
  }
  .dark-distance {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    color: #7bdffe;
  }
  .action-btn >>> .u-button {
    height: 60rpx;
    padding: 0 25rpx;
    border-radius: 30rpx;
    color: #18181a !important;
  }
  .dark-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400rpx;
  }
  .dark-empty-state image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
  }
  .dark-empty-text {
    font-size: 28rpx;
    color: #7bdffe;
  }
  .dark-loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 300rpx;
  }
  .dark-loading-text {
    font-size: 28rpx;
    color: #7bdffe;
    margin-top: 20rpx;
  }
  .dark-match-all-btn {
    padding: 20rpx 30rpx;
    background-color: #23232b;
    border-top: 1rpx solid #23232b;
  }
  .dark-match-all-btn >>> .u-button {
    border-radius: 45rpx;
    background: linear-gradient(90deg, #7bdffe, #b97cff) !important;
    color: #fff !important;
    border: none !important;
  }
</style>